<form [formGroup]="formGroup" [bitSubmit]="submit">
  <div class="tw-mt-12 tw-flex tw-justify-center">
    <div class="tw-max-w-xl">
      <h1 bitTypography="h1" class="tw-mb-4 tw-text-center">{{ "updateEncryptionKey" | i18n }}</h1>
      <div
        class="tw-block tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-8"
      >
        <p>
          {{ "updateEncryptionSchemeDesc" | i18n }}
          <a
            href="https://bitwarden.com/help/account-encryption-key/#rotate-your-encryption-key"
            target="_blank"
            rel="noopener"
            >{{ "learnMore" | i18n }}</a
          >
        </p>
        <bit-callout type="warning">{{ "updateEncryptionKeyWarning" | i18n }}</bit-callout>

        <bit-form-field>
          <bit-label>{{ "masterPass" | i18n }}</bit-label>
          <input
            id="masterPassword"
            bitInput
            type="password"
            formControlName="masterPassword"
            appAutofocus
          />
          <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
        </bit-form-field>
        <button type="submit" bitButton bitFormButton buttonType="primary" block>
          {{ "updateEncryptionKey" | i18n }}
        </button>
      </div>
    </div>
  </div>
</form>
